import React from 'react';
import { StyleSheet, Text, View ,FlatList, Alert, RefreshControl, ListHeaderComponent} from 'react-native';
import { StackNavigator } from 'react-navigation';
import MovieInfo from './component/movieInfo';


const initMovieDatas = [{
    movieTitle:'前任3：再见前任',
    watcherOpinion: 9.0,
    director: '田雨生',
    leadingRoles: '韩庚 郑凯 于文文',
    wonderfulSentences: '只有至尊宝失去了紫霞，才能真正成为齐天大圣',
    showDate: '10月3日',
    poster: '../img/zhanlang.png',
    id:1
  },{
    movieTitle:'战狼',
    watcherOpinion: 9.1,
    director: '吴京',
    leadingRoles: '吴京 张翰 卢静娴',
    wonderfulSentences: '请记住你的身后有一个强大的祖国',
    showDate: '2月3日',
    poster: '../img/zhanlang.png',
    id:2
  },{
    movieTitle:'前任3：再见前任',
    watcherOpinion: 9.0,
    director: '田雨生',
    leadingRoles: '韩庚 郑凯 于文文',
    wonderfulSentences: '只有至尊宝失去了紫霞，才能真正成为齐天大圣',
    showDate: '9月3日',
    poster: '../img/zhanlang.png',
    id:3
  },{
    movieTitle:'战狼',
    watcherOpinion: 9.1,
    director: '吴京',
    leadingRoles: '吴京 张翰 卢静娴',
    wonderfulSentences: '请记住你的身后有一个强大的祖国',
    showDate: '8月3日',
    poster: '../img/zhanlang.png',
    id:4
  },{
    movieTitle:'前任3：再见前任',
    watcherOpinion: 9.0,
    director: '田雨生',
    leadingRoles: '韩庚 郑凯 于文文',
    wonderfulSentences: '只有至尊宝失去了紫霞，才能真正成为齐天大圣',
    showDate: '5月3日',
    poster: '../img/zhanlang.png',
    id:5
  },{
    movieTitle:'战狼',
    watcherOpinion: 9.1,
    director: '吴京',
    leadingRoles: '吴京 张翰 卢静娴',
    wonderfulSentences: '请记住你的身后有一个强大的祖国',
    showDate: '11月3日',
    poster: '../img/zhanlang.png',
    id:6
  },{
    movieTitle:'前任3：再见前任',
    watcherOpinion: 9.0,
    director: '田雨生',
    leadingRoles: '韩庚 郑凯 于文文',
    wonderfulSentences: '只有至尊宝失去了紫霞，才能真正成为齐天大圣',
    showDate: '10月24日',
    poster: '../img/zhanlang.png',
    id:7
  },{
    movieTitle:'战狼',
    watcherOpinion: 9.1,
    director: '吴京',
    leadingRoles: '吴京 张翰 卢静娴',
    wonderfulSentences: '请记住你的身后有一个强大的祖国',
    showDate: '10月6日',
    poster: '../img/zhanlang.png',
    id:8
  },{
    movieTitle:'战狼',
    watcherOpinion: 9.1,
    director: '吴京',
    leadingRoles: '吴京 张翰 卢静娴',
    wonderfulSentences: '请记住你的身后有一个强大的祖国',
    showDate: '10月6日',
    poster: '../img/zhanlang.png',
    id:9
  }]

class HomeScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      refreshing: false,
      movieDatas: [{
          movieTitle:'前任3：再见前任',
          watcherOpinion: 9.0,
          director: '田雨生',
          leadingRoles: '韩庚 郑凯 于文文',
          wonderfulSentences: '只有至尊宝失去了紫霞，才能真正成为齐天大圣',
          showDate: '10月3日',
          poster: '../img/zhanlang.png',
          id:1
        }]
    };
  }


  static navigationOptions = {
    title: 'Welcome'
  };


   _onRefresh = () => {
    this.setState({refreshing: true});
    this.fetchData();
  }

  fetchData = () => {
    fetch('https://facebook.github.io/react-native/movies.json')
    .then((response) => response.json())
    .then((responseJson) => {
      // console.log(responseJson.movies);
      this.setState({
      movieDatas: initMovieDatas
    });
    // Alert.alert("刷新成功 ！")
    })
    .catch((error) => {
    Alert.alert("刷新失败 ！")
    }); 
    return this.setState({refreshing: false});
  }

  _keyExtractor = (item, index) => index;

  _onPressmovie = () => (
      Alert.alert("you onPressed !")
    );

  _renderMovie = ({item}) => { 
    return (
      <MovieInfo
        key={item.id}
        data={item}
        onPressMovie={this._onPressmovie}
        />
    );
  };

  _onEndReached = () => {
    this.setState(() => ({
      movieDatas: this.state.movieDatas.concat(initMovieDatas),
    }));
  };

  render() {
  console.log(this.state)
    return (
      <View >
        <View style={styles.text}>
          <Text>老区露天电影院</Text>
          <Text>每周五晚7:10 两场连映</Text>
        </View>
        <View>
          <FlatList
            keyExtractor={this._keyExtractor}
            data={this.state.movieDatas}
            renderItem={this._renderMovie}
            refreshControl={
              <RefreshControl
                refreshing={this.state.refreshing}
                onRefresh={this._onRefresh}
                title="刷新中..."
              />
            }
            onEndReached={this._onEndReached}
             onEndReachedThreshold={0.1}
           />
        </View>
      </View>
      );
  }
}

const SimpleApp = StackNavigator({
  Home: { screen: HomeScreen }
});

export default class App extends React.Component {
  render() {
    return (
              <SimpleApp />
            );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  },
  text: {
    flexDirection:'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    height: 50,
    backgroundColor:'#DDDDDD'
  }
});

